<template>
    <div id="home">
        <div class="info">
          <div class="date">
            11.27-12.12
          </div>
          <div class="">
            ID: <span>{{phone}}</span>
          </div>
        </div>
        <div class="title">
            <div class="titleimg"><img src="../assets/img/top.jpg" alt=""></div>
            <div class="titleinfo">
                南泉战斗自26日下午约3点打响，至28日晚11点半许我军撤出战斗，历时约56个小时，是解放重庆外围的一次持续时间最长、最激烈的战斗。它重创了守敌和国民党军队在重庆的“江南防线”，为我主力部队大迁回、大包围解放重庆嬴得了宝贵时间。
            </div>
        </div>
        <div class="child">
            <div class="event" >
                <div class="childs">
                <router-link :to="'/content/'+1">
                    <img src="../assets/img/childs1.png"  v-if="num>0">
                    <img src="../assets/img/childs1-1.png"  v-else>
                </router-link>

                </div>
                <div class="childtitle">{{homeInfo[0].title}}</div>
            </div>
            <div class="event" >
                <div 
                class="childs" 
                >
                <router-link :to="'/content/'+2">
                    <img src="../assets/img/childs2.png" alt="" v-if="num>1">
                    <img src="../assets/img/childs2-1.png" alt="" v-else>
                </router-link>

                </div>
                <div class="childtitle">{{homeInfo[1].title}}</div>
            </div>
            <div class="event" >
                <div 
                class="childs" 
                >
                <router-link :to="'/content/'+3">
                    <img src="../assets/img/childs3.png" alt="" v-if="num>2">
                    <img src="../assets/img/childs3-1.png" alt="" v-else>
                </router-link>
                
                </div>
                <div class="childtitle">{{homeInfo[2].title}}</div>
            </div>
            <div class="event" >
                <div 
                class="childs" 
                >
                <router-link :to="'/contentfinal/'+4">
                    <img src="../assets/img/childs4.png" alt="" v-if="num>2">
                    <img src="../assets/img/childs4-1.png" alt="" v-else>               
                </router-link>
                </div>
                <div class="childtitle">{{homeInfo[3].title}}</div>
            </div>
        </div>
        <router-link :to="'/content/'+1">
            <div class="button"><img src="../assets/img/button1.png" alt=""></div>
        </router-link>
    </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
  data(){
   return {
       id:'',
    //    baseUrl:'http://192.168.111.31:80',
       baseUrl:'https://tiaodao.headlinetop.com',
       salt:'',
       token:'',
       homeInfo:null,
       scriptid:'',
       clueId:'',
       phone:'',
       userpass:null,
       num:0,
   }
  },
  created(){
    this.salt=sessionStorage.getItem('web-token')
    this.token=sessionStorage.getItem('token')
    
    this.getScriptTitle()
    this.getUserInfo()
    console.log(this.scriptid);
    
    
  },
  methods:{
    handledetail(){
        this.$router.push('/content')
    },
    //首页获取场景列表
    getScriptTitle(){
        axios.get(this.baseUrl+'/web/Script/getScriptTitle',{
            headers:{
                "web-token":this.salt
            }
        })
        .then((res)=>{
            console.log(res);
            this.homeInfo=res.data.data
            // console.log(res.data.data);
            
        })
    },
    //获取用户信息
    getUserInfo(){
        axios.get(this.baseUrl+`/web/Script/getUserInfo?user_token=${this.token}`,{
            headers:{
                "web-token":this.salt
            }
        })
        .then((res)=>{
            let userinfo=res.data.data
            console.log(userinfo);
            
            this.phone=userinfo.phone
            this.userpass=userinfo.script_id
            //拿到用户通关的目录 nums.map(Number)
            this.scriptid=(userinfo.script_id).map(Number)
            console.log(this.scriptid);
            for(var i=0;i<this.scriptid.length;i++){
                if(this.scriptid[i]){
                    this.num++
                }
            }
            console.log(this.num);
                
        })
    },   
  },
  computed:{
      handlebian:function(){
        if(this.scriptid&&this.clueId){
          return (this.scriptid).includes(this.clueId)
        }else{
          return this.baseUrl
        }
        
      }
  }
}
</script>
<style lang='css' scoped src="../assets/css/home.css"></style>
<style lang='less' scoped>

</style>
